<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen">

<!-- Theme Stylesheet -->
<link rel="stylesheet" href="assets/css/dandelion.theme.css" media="screen">
<!-- Icon Stylesheet -->
<link rel="stylesheet" href="assets/css/fonts/glyphicons/style.css" media="screen">
<!--  Main Stylesheet -->
<link rel="stylesheet" href="assets/css/dandelion.css" media="screen">
<!-- Demo Stylesheet -->
<link rel="stylesheet" href="assets/css/demo.css" media="screen">

<title>Dandelion Admin - Typography</title>

</head>

<body>

    <!-- Dandelion Customizer (remove if not needed) -->
    <div id="da-customizer">
        <div id="da-customizer-content">
            <ul>
                <li>
                    <span class="da-customizer-title">Background Pattern</span>
                    <span id="da-customizer-body-bg"></span>
                </li>
                <li>
                    <span>Header Pattern</span>
                    <span id="da-customizer-header-bg"></span>
                </li>
                <li>
                    <span>Layout</span>
                    <ul id="da-customizer-layouts" class="clearfix">
                        <li>
                            <input type="radio" id="da-customizer-fluid" name="da-layout" checked="checked">
                            <label for="da-customizer-fluid">Fluid</label>
                        </li>
                        <li>
                            <input type="radio" id="da-customizer-fixed" name="da-layout">
                            <label for="da-customizer-fixed">Fixed</label>
                        </li>
                    </ul>
                </li>
            </ul>
            <div id="da-customizer-button">
                <button class="btn btn-danger">Get CSS</button>
            </div>
        </div>
        <span id="da-customizer-pulldown"><i class="icon-cogwheels"></i></span>
    </div>
    
	<!-- Main Wrapper. Set this to 'fixed' for fixed layout and 'fluid' for fluid layout' -->
	<div id="da-wrapper">
    
        <!-- Header -->
        <div id="da-header">
        
            <div id="da-header-top">
                
                <!-- Container -->
                <div class="da-container clearfix">
                    
                    <!-- Logo Container. All images put here will be vertically centere -->
                    <div id="da-logo-wrap">
                        <div id="da-logo">
                            <div id="da-logo-img">
                                <a href="dashboard.html">
                                    <img src="assets/images/logo.png" alt="Dandelion Admin">
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Header Toolbar Menu -->
                    <div id="da-header-toolbar" class="clearfix">
                        <div id="da-user-profile-wrap">
                            <div id="da-user-profile" data-toggle="dropdown" class="clearfix">
                                <div id="da-user-avatar">
                                    <img src="assets/images/pp.jpg" alt="">
                                </div>
                                <div id="da-user-info">
                                    John Doe
                                    <span class="da-user-title">Creative Director</span>
                                </div>
                            </div>
                            <ul class="dropdown-menu">
                                <li><a href="dashboard.html">Dashboard</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Change Password</a></li>
                            </ul>
                        </div>
                        <div id="da-header-button-container">
                            <ul>
                                <li class="da-header-button-wrap">
                                    <div class="da-header-button" data-toggle="dropdown">
                                        <span class="btn-count">32</span>
                                        <a href="#"><i class="icon-circle-exclamation-mark"></i></a>
                                    </div>
                                    <ul class="dropdown-menu pull-right">
                                        <li>
                                            <span class="da-dropdown-sub-title">Notifications</span>
                                            <ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer" href="#">
                                                View all notifications
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="da-header-button-wrap">
                                    <div class="da-header-button" data-toggle="dropdown">
                                        <span class="btn-count">5</span>
                                        <a href="#"><i class="icon-envelope"></i></a>
                                    </div>
                                    <ul class="dropdown-menu pull-right">
                                        <li>
                                            <span class="da-dropdown-sub-title">Messages</span>
                                            <ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                        <span class="info">
                                                            <span class="name">John Doe</span>
                                                            <span class="message">
                                                                Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                            </span>
                                                            <span class="time">
                                                                January 21, 2012
                                                            </span>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer" href="#">
                                                View all messages
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="da-header-button-wrap">
                                    <div class="da-header-button">
                                        <a href="index.html"><i class="icon-power"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                                    
                </div>
            </div>
            
            <div id="da-header-bottom">
                <!-- Container -->
                <div class="da-container clearfix">
                
                	<div id="da-search">
                    	<form>
                        	<input type="text" class="search-query" placeholder="Search...">
                        </form>
                    </div>
                	
                    <!-- Breadcrumbs -->
                    <div id="da-breadcrumb">
                        <ul>
                            <li><a href="dashboard.html"><i class="icon-home"></i> Dashboard</a></li>
                            <li><span>Layout and Typography</span></li>
                            <li class="active"><span>Typography</span></li>
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
    
        <!-- Content -->
        <div id="da-content">
            
            <!-- Container -->
            <div class="da-container clearfix">
            
                <!-- Sidebar Separator do not remove -->
                <div id="da-sidebar-separator"></div>
                
                <!-- Sidebar -->
                <div id="da-sidebar">

                    <!-- Navigation Toggle for < 480px -->
                    <div id="da-sidebar-toggle"></div>
                
                    <!-- Main Navigation -->
                    <div id="da-main-nav" class="btn-container">
                        <ul>
                            <li>
                                <a href="dashboard.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-home"></i>
                                    </span>
                                    Dashboard
                                </a>
                            </li>
                            <li>
                                <a href="statistics.html">
                                    <!-- Nav Notification -->
                                    <span class="da-nav-count">32</span>
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-stats"></i>
                                    </span>
                                    Statistics
                                </a>
                            </li>
                            <li>
                                <a href="calendar.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-calendar"></i>
                                    </span>
                                    Calendar
                                </a>
                            </li>
                            <li>
                                <a href="file.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-folder-open"></i>
                                    </span>
                                    File Handling
                                </a>
                            </li>
                            <li>
                                <a href="table.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-table"></i>
                                    </span>
                                    Table
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-edit"></i>
                                    </span>
                                    Form
                                </a>
                                <ul>
                                    <li><a href="form-layouts.html">Layouts</a></li>
                                    <li><a href="form-elements.html">Elements</a></li>
                                    <li><a href="form-validation.html">Validation</a></li>
                                    <li><a href="form-wizard.html">Wizard</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="ui.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-settings"></i>
                                    </span>
                                    UI Elements
                                </a>
                            </li>
                            <li class="active">
                                <a href="#">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-font"></i>
                                    </span>
                                    Layout and Typography
                                </a>
                                <ul class="closed">
                                    <li><a href="grids.html">Grids and Panels</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="gallery.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-picture"></i>
                                    </span>
                                    Gallery
                                </a>
                            </li>
                            <li>
                                <a href="error.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-warning-sign"></i>
                                    </span>
                                    Error Page (404)
                                </a>
                            </li>
                            <li>
                                <a href="icons.html">
                                    <!-- Icon Container -->
                                    <span class="da-nav-icon">
                                        <i class="icon-crown"></i>
                                    </span>
                                    Icons
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
                
                <!-- Main Content Wrapper -->
                <div id="da-content-wrap" class="clearfix">
                
                	<!-- Content Area -->
                	<div id="da-content-area">

                        <div class="row-fluid">
                            <div class="span6">
                                <div class="da-panel">
                                	<div class="da-panel-content">
                                    	<h1>Heading 1</h1>
                                    	<h2>Heading 2</h2>
                                    	<h3>Heading 3</h3>
                                    	<h4>Heading 4</h4>
                                    	<h5>Heading 5</h5>
                                    	<h6>Heading 6</h6>
                                    </div>
                                </div>
                                <div class="da-panel">
                                    <div class="da-panel-content">
                                        <h3>Paragraph Text</h3>
                                        <p><em>Lorem ipsum dolor sit amet</em>, <a href="#">consectetur adipiscing elit</a>. Quisque rutrum, libero ut ultricies pulvinar, lorem velit sollicitudin enim, sed <a href="#">faucibus</a> tortor lectus et sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vivamus viverra fringilla sem, at porttitor justo scelerisque id. Mauris aliquet ullamcorper velit, eu elementum dolor consequat nec. Morbi ante sem, euismod ut accumsan sit amet, venenatis ac dui. <a href="#">Suspendisse fringilla</a> dui et purus sollicitudin fermentum. Sed facilisis viverra turpis, id cursus lectus varius ultrices. Quisque tristique ligula leo. Sed cursus, nisi dignissim auctor auctor, neque felis consequat mi, eu interdum justo urna ut lectus. Suspendisse ultricies, erat vel convallis aliquet, lacus tellus ornare felis, vitae commodo mi lacus in libero. Donec viverra, nisl at vestibulum mattis, massa erat porta dolor, eu aliquam felis diam non ante. <a href="#">Phasellus mollis</a> <strong>nisi rutrum turpis egestas vel</strong> semper sapien sollicitudin.</p>
                                    </div>
                                </div>
                                <div class="da-panel">
                                    <div class="da-panel-content">
                                        <h3>Block Quote</h3>
                                        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in enim nisi. Aenean faucibus dictum ante nec lacinia. Phasellus quis imperdiet lectus. Class aptent taciti.</blockquote>
                                    </div>
                                </div>
                            </div>
                            <div class="span6">
                                <div class="da-panel">
                                    <div class="da-panel-content">
                                        <h3>Unordered List</h3>
                                        <ul>
                                            <li>Apple</li>
                                            <li>Ananas</li>
                                            <li>Banana</li>
                                            <li>Cherry</li>
                                            <li>Durian</li>
                                            <li>Grape</li>
                                        </ul>

                                        <h3>Ordered List</h3>
                                        <ol>
                                            <li>Apple</li>
                                            <li>Ananas</li>
                                            <li>Banana</li>
                                            <li>Cherry</li>
                                            <li>Durian</li>
                                            <li>Grape</li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="da-panel">
                                    <div class="da-panel-content">
                                        <h3>Code with Syntax Highlighting</h3>
                                        <p>The following is a code block, highlighted using <a href="http://code.google.com/p/google-code-prettify/" target="_blank">Google Prettify</a></p>
<pre class="prettyprint theme-balupton linenums">
$.each( steps, function( i, step ) {
    var item = $( '&lt;li&gt;&lt;/li&gt;' );
    var title = $( step ).find( that.options.labelElement ).hide();
    var link = $( '&lt;a&gt;&lt;/a&gt;' ).html( that._retrieveIcon( i, title ) );
    var label = $( '&lt;span&gt;&lt;/span&gt;' ).text( title.text() );

    item.append( link ).append( label ).appendTo( nav );
    item.css( 'width',  (100.0 / stepCount) + '%' );

    $( step ).add( item ).attr( 'data-wzd-id', that._generateRandomId() );
});
</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">

                        </div>
                                                
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
        <!-- Footer -->
        <div id="da-footer">
        	<div class="da-container clearfix">
            	<p>Copyright 2012. Dandelion Admin. All Rights Reserved.
            </div>
        </div>
        
    </div>

    <!-- JS Libs -->
    <script src="assets/js/libs/jquery-1.8.3.min.js"></script>
    <script src="assets/js/libs/jquery.placeholder.min.js"></script>
    <script src="assets/js/libs/jquery.mousewheel.min.js"></script>

    <!-- JS Bootstrap -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    
    <!-- jQuery-UI JavaScript Files -->
    <script src="assets/jui/js/jquery-ui-1.9.2.min.js"></script>
    <script src="assets/jui/jquery.ui.timepicker.min.js"></script>
    <script src="assets/jui/jquery.ui.touch-punch.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/jui/css/jquery.ui.all.css" media="screen">

    <!-- JS Plugins -->

    <!-- Google Prettify -->
    <script src="plugins/prettify/prettify.js"></script>
    <link rel="stylesheet" href="plugins/prettify/themes/theme-balupton.css" media="screen">

    <!-- JS Demo -->
    <script src="assets/js/demo/demo.typography.js"></script>

    <!-- JS Template -->
    <script src="assets/js/core/dandelion.core.js"></script>

    <!-- JS Customizer -->
    <script src="assets/js/core/dandelion.customizer.js"></script>

    <script>
        window.prettyPrint && prettyPrint();
    </script>
    
</body>
</html>
